<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
            <div class="mask">
            </div>
        </div>
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>退货详情</p>
            </div>
        </div>
        <div class="body">
            <ul>
                <li>
                    <span class="left">退货单号：</span>
                    <span class="right">{{returnId}}</span>
                </li>
                <li>
                    <span class="left">订单号：</span>
                    <span class="right">{{detail.orderId}}</span>
                </li>
                <li>
                    <span class="left">退货单类型：</span>
                    <span class="right" v-if="detail.returnTypeId == 'CUSTOMER_RETURN'">销售订单退货单</span>
                    <span class="right" v-else>采购订单退货单</span>
                </li>
                <li>
                    <span class="left">退货单状态：</span>
                    <span class="right" >{{detail.statusName}}</span>
                </li>
                <li>
                    <span class="left">创建时间：</span>
                    <span class="right">{{detail.createdStamp}}</span>
                </li>
            </ul>
        </div>
        <div class="height">
            <div class="detail">
                <ul v-for="item in product_list" :key="item.id">
                    <li>
                        <span class="left">商品编码：</span>
                        <span class="right">{{item.productCode}}</span>
                    </li>
                    <li v-show="item.productName.length < 19">
                        <span class="left">商品名称：</span>
                        <span class="right">{{item.productName |format_str}}</span>
                    </li>
                    <li v-show="item.productName.length >= 19">
                        <span class="left">商品名称：</span>
                        <p class="right_">{{item.productName | format_str }}</p>
                    </li>
                    <li>
                        <span class="left">单&ensp;&ensp;&ensp;&ensp;位：</span>
                        <span class="right">{{item.unit}}</span>
                    </li>
                    <li>
                        <span class="left">订单数量：</span>
                        <span class="right"> {{item.quantity}}</span>
                    </li>
                    <li>
                        <span class="left">退货数量：</span>
                        <span class="right"> {{item.returnQuantity}}</span>
                    </li>
                    <li>
                        <span class="left">换货数量：</span>
                        <span class="right" v-if="item.changeQuantity"> {{item.changeQuantity}}</span>
                        <span class="right" v-else></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import smalloading from "./../../loading/smalloading";
export default {
  name: "returnGoodsList",
  data() {
    return {
      amount: "",
      detail: {},
      product_list: [],
      isModal: true,
      returnId : ''
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      history.go(-1);
    },
    load_list: function() {
      this.isModal = true;
      let returnId = sessionStorage.getItem("returnId");
      let returnTypeId = sessionStorage.getItem("returnTypeId") ;
      this.$http.post("api/motor/getReturnInfo2", {
          returnId: returnId,
          returnTypeId : returnTypeId ,
          storcode: localStorage.getItem("storcode")
        }).then(
          res => {
            this.isModal = false;
            let result = res.data;
            if (res.data.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (result.code == 100) {
              console.log(result);
              this.returnId = result.data.returnList[0].returnId ;
              this.detail = result.data.returnList[0].baseInfo;
              this.product_list = result.data.returnList[0].productInfo;
            }
            if(result.code == 102){
              let this_ = this ;
              this_.$layer.alert(result.msg, function(){
                this_.$layer.close(this.id);
                history.go(-1)
              });
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    }
  },
  created: function() {
    this.load_list();
  }
};
</script>
<style lang="css" scoped>
.textarea {
  background: #fff;
  border: 1px solid #ddd;
  width: 90%;
  margin: 1.6rem;
  border-radius: 7px;
  padding: 1rem;
}
.right_ {
  width: 200px;
  word-break: break-all;
  /* float: right; */
  display: inline-flex !important;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 60% auto;
  z-index: 88;
}

.mar {
  width: 65%;
}

.body {
  padding-top: 0.1rem;
  margin-bottom: 1rem;
  background: #fff;
}

.body ul {
  margin-top: 5rem;
}

.body li:last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  max-height: 5rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 65%; */
}

.body .right {
  float: right;
  margin-right: 5px;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.detail .left {
  padding: 0 1.8rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 15px;
}

.height {
  /* height: 19rem; */
  /* background: #fff; */
  overflow: scroll;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 41%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  width: 100%;
  position: fixed;
  z-index: 33;
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}
</style>